<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="" style="background: #ffffff;">
			<uni-search-bar @confirm="search" :focus="false" placeholder="请输入搜索内容" v-model="searchValue" @blur="blur"
				@focus="focus" @input="input" @cancel="cancel" @clear="clear">
			</uni-search-bar>
		</view>
        <!-- #endif -->
		
		
		<view style="margin:10upx 30upx 0 30upx;box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.04);">
			<homeBanner :banners="banners"></homeBanner>
		</view>
		<view class="ss-video-content flex space" style="display:flex; justify-content: space-between; flex-wrap:wrap; padding: 30upx 30upx 0px 30upx;">
			<block v-for="(value, key) in listData" :key="key">
				<view class="box pb10 mb15 " style="width:31%; border-radius:20rpx;" @click="detail(value.id, 0)">
					<image class="integral-mall-goods" mode="aspectFill" :src="value.image"></image>
					<view class="mt8 plr10 ft14 ftw400 text-center text-over cl-main">{{value.title}}</view>
				</view>
			</block>
		</view>
		<uni-load-more :status="status" :content-text="contentText" />
		<view style="width: 100%; height: 30upx;"></view>

	</view>
</template>

<script>
	import homeBanner from '@/pagesVideo/components/home/banner';
	// import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
    import { apiGetAdList, apiGetShartVideoList } from "@/api/shart_video.js"
	export default {
		components: {
			// uniLoadMore,
			homeBanner
		},
		data() {
			return {
				banners: [],
				vipLevel: 0,
				showLogin: false,
				datasa: [],
				dataconfig: [],
				searchValue: '',
				total: 0,
				pageSize: 10,
				tabs: [{
						name: '全部'
					},
					{
						name: '视频'
					},
					{
						name: '音频'
					},
					{
						name: '小说'
					},
					{
						name: '壁纸'
					},
				],
                sonType: '2',
                paginationData: {
                    page_size: 10,
                    page_no: 1,
                },
				selectIndex: 0,
				scrollTop: 0,

				type2tab: [],
				selecttype2: 0,
				type2id: '',

				type3tab: [],
				selecttype3: 0,
				type3id: '',

				type4tab: [],
				selecttype4: 0,
				type4id: '',

				typetab: [],
				selecttype: 0,
				typeid: '',

				addddtab: [],
				selectadddd: 0,
				addddid: '',

				yeartab: [],
				selectyear: 0,
				yearid: '',

				type: '',
				keytext: '',
				listData: [],
				last_id: 0,
				reload: true,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多数据了'
				},
				isLoading: false
			}
		},
		onLoad(e) {
			if (e.selectIndex) {
				this.selectIndex = e.selectIndex * 1
			}
			if(e.keytext) {
				this.keytext = e.keytext;
			}
            if (e.type) {
                this.sonType = e.type
            }
			this.status = 'more';
            this.listData = []
			this.getJsonData();
			this.getAdList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.getJsonData();
		},
		//监听搜索框文本变化
		onNavigationBarSearchInputChanged(e) {
			let text = e.text;
			if (text) {
				this.keytext = text;
			}
			console.log('text', text)
		},
		//监听点击搜索按钮事件
		onNavigationBarSearchInputConfirmed(e) {
			// #ifdef APP-PLUS
			plus.key.hideSoftKeybord();
			// #endif
            console.log("onNavigationBarSearchInputConfirmed", e)
			var this_ = this
			let text = e.text;
			if (!text) {
				uni.showModal({
					title: '',
					content: "请输入搜索内容",
					showCancel: false,
					confirmText: "确定",
					confirmColor: "#e19503",
					success: function(res) {
                       console.log("ssss", res)
                        this_.listData = [];
						this_.keytext = '';
                        this_.status = 'more'
                        this_.paginationData.page_no = 1
						this_.getJsonData(0)
                        console.log("杀杀杀")
					}
				});
				return;
			} else {
				this.keytext = text;
				this.listData = [];
				this.last_id = 0;
				this.type = '';
                this.status = 'more'
                this.paginationData.page_no = 1
				this.getJsonData(0)
			}

		},
		methods: {
            /**
             * 获取到数据后，需要把他缓存起来。已经在apiGetAdList中做了缓存。
             */
            getAdList() {
                const vm = this
                apiGetAdList(true).then((res) => {
                    console.log("resaaa",res)
                    const { lists } = res
                    vm.banners = lists
                })
            },
			detail(vid, mid) {
				var fxpid = 1
				uni.navigateTo({
					url: '/pagesVideo/pages/tuan/detail?vid=' + vid + '&mid=' + mid + '&fxpid=' + fxpid
				})
			},
			
            getJsonData() {
                const vm = this
                let data = {
                    keyword: this.keytext,
                    return_type: this.sonType,
                    ...this.paginationData
                };
                if (vm.status === 'loading' || vm.status === 'noMore') {
                    return
                }
                console.log("getJsonData data", data)
                vm.status = 'loading';
                apiGetShartVideoList(data).then(res=>{
                    console.log("aq res", res)
                	if (res.count > 0) {
                		let list = res.lists;
                		vm.listData = vm.listData.concat(list);
                        vm.paginationData.page_no =  vm.paginationData.page_no + 1
                		if (res.count > vm.listData.length) {
                			vm.status = 'more';
                		} else {
                            vm.status = 'noMore';
                        }
                	} else {
                		vm.listData = [];
                		vm.contentText.contentdown = '暂无数据'
                		vm.status = 'noMore'
                	}
                }).catch((err) => {
                    console.log("apiGetShartVideoList err", err)
                })
            },
			
			search(res) {
				this.listData = [];
				this.last_id = 0;
				this.keytext = res.value;
				this.type = '';
                this.status = 'more'
                this.paginationData.page_no = 1
				this.getJsonData(0)
			},

			clear(res) {
                console.log("abc", res)
                this.listData = [];
                this.status = 'more'
                this.paginationData.page_no = 1
                this.getJsonData(0)
                
			},
			input(res) {
				console.log('----input:', res)
			},
			blur(res) {
                console.log("blur res", res)
				// this.listData=[];
				// this.last_id=0;
				// this.keytext=res.value;
				// this.type='';	
                // this.status = 'more'
				// this.getJsonData(0)
				//res.value 
			},
			focus(e) {

			},
			cancel(res) {
                console.log("cancel", res)
				this.keytext = '';
				this.type = '';
                this.status = 'more'
				this.getJsonData(0)
			}
		}
	}
</script>

<style scoped>
	.integral-mall-goods {
		width: 100%;
		height: 280rpx;
		background: #F2F2F2;
		border-radius: 16upx;
	}

	.user-not-vip {
		width: 100%;
		height: 80rpx;
		background: #FDF6EC;
		border-radius: 40rpx;
		border: 2rpx solid #EFC381;
		text-align: center;
		line-height: 76rpx;
		font-size: 24rpx;
		color: #000000;
		font-weight: bold;
	}


	.tuan-product-l {
		width: 320rpx;
		height: 240rpx;
		border-radius: 16rpx;
		background: #F2F2F2;
	}

	.tuan-product-r {
		width: calc(100% - 320rpx);
	}

	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}
    .ss-video-content {
        
    }
</style>